<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 400px;height:200px;border: solid 1px black;position: relative;margin: 0 auto;}
    .box p{margin: 0;position: absolute;left:0;top:85px;height: 30px;background: red;line-height: 30px;text-align: center;color: #fff;width: 0;overflow: hidden;}

    .alertBox{position: fixed;left: 0;top:0;right:0;bottom:0;background: rgba(200,200,200,0.5);display: none;}
    .alertBox .alert{width:300px;height:160px;background: #fff;position: absolute;left: 0;top:0;right:0;bottom:0;margin: auto;padding: 20px;box-shadow: 0px 0px 5px 5px #ccc;}
  </style>
</head>
<body>
  <h1>这是一个页面</h1>
  <div class="box">
    <p></p>
  </div>
  <div class="alertBox">
    <div class="alert">
      <h2>这是一个弹出框</h2>
      <p>这是弹出来的信息</p>
      <input type="button" value="确定" class="close">
    </div>
  </div>
</body>
<script>

  var alertBox = document.querySelector(".alertBox");
  var close = alertBox.querySelector(".close");
  var box = document.querySelector(".box");
  var p = box.querySelector("p");
  var t;
  var speed = 9;
  var target = 400;

  box.onclick = function(){
    t = setInterval(function(){
      // 获取要控制的属性的当前值
      var w = parseInt(getStyle(p, "width"));
      // 判断剩下的距离，是否足够一步
      if(target - w < speed){
        // 如果不够一步了，清除计时器
        clearInterval(t);
        // 强行将进度条设置到终点
        p.style.width = target + "px";
        p.innerHTML = "100%";

        // 进度条完成，执行后续功能
        // 显示弹出框
        alertBox.style.display = "block";

      }else{
        // 剩下距离足够一步，继续向前走一个步长
        p.style.width = w + speed + "px";
        // 计算百分比
        p.innerHTML = parseInt(w / target * 100) + "%";
      }
    }, 30);
  }

  // 点击弹出框的确定按钮
  close.onclick = function(){
    // 隐藏弹出框
    alertBox.style.display = "none";
    // 将进度条的状态，初始化
    p.style.width = "0";
    p.innerHTML = "";

    // 跳转到其他页面
    location.assign('http://www.baidu.com');
  }


  function getStyle(ele,attr){
    return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele)[attr];
  }
  
</script>
</html>